<template>
  <view class="content">
    <view class="body" :class="{ option_close: !getStatus }">
      <view class="details">
        <text class="text">{{ content }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "options",
  props: {
    content: String,
    clickedPrimary: Boolean,
    checkedSecondary: Boolean,
  },
  mounted() {
    // console.log(this.content);
  },
  data() {
    return {};
  },
  methods: {},
  computed: {
    getStatus() {
      if (!this.clickedPrimary && !this.checkedSecondary) {
        return false;
      } else if (this.clickedPrimary && !this.checkedSecondary) {
        return false;
      } else if (!this.clickedPrimary && this.checkedSecondary) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  .body {
    opacity: 1;
    height: 10vh;
    // padding: 36rpx 0;
    width: 100%;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    transition: all 0.4s ease;
    border-bottom: 2rpx solid #dbdbdb;
    .details {
      padding-left: 16rpx;
      .text {
        font-size: 30rpx;
        color: #444444;
      }
    }
  }
  .option_close {
    height: 0;
    transition: all 0.4s ease;
    overflow: hidden;
    border: none;
    opacity: 0;
  }
}
</style>